<template>
  <div class="generate-cron-container">
    <Alert>当前功能为测试版本，如遇问题请联系</Alert>
    <Card class="card-container">
      <template #title>
        <div class="card-title">
          <Icon type="ios-calendar-outline" />
          <span>Cron表达式生成器</span>
        </div>
      </template>
      <div class="cron-content">
        <div class="cron-tabs">
          <Tabs v-model="activeTab">
            <TabPane label="秒" name="second">
              <div class="tab-content">
                <RadioGroup v-model="second.type" @on-change="generateCronExpression">
                  <Radio label="every">每秒</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                </RadioGroup>
                <div v-if="second.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="second.start" :min="0" :max="59" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="second.end" :min="0" :max="59" @on-change="generateCronExpression" />
                  <span>秒</span>
                </div>
                <div v-if="second.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="second.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 60" :key="`second-${i-1}`" :label="i-1">{{ i-1 }}</Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
            </TabPane>
            <TabPane label="分钟" name="minute">
              <div class="tab-content">
                <RadioGroup v-model="minute.type" @on-change="generateCronExpression">
                  <Radio label="every">每分钟</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                </RadioGroup>
                <div v-if="minute.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="minute.start" :min="0" :max="59" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="minute.end" :min="0" :max="59" @on-change="generateCronExpression" />
                  <span>分钟</span>
                </div>
                <div v-if="minute.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="minute.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 60" :key="`minute-${i-1}`" :label="i-1">{{ i-1 }}</Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
            </TabPane>
            <TabPane label="小时" name="hour">
              <div class="tab-content">
                <RadioGroup v-model="hour.type" @on-change="generateCronExpression">
                  <Radio label="every">每小时</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                </RadioGroup>
                <div v-if="hour.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="hour.start" :min="0" :max="23" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="hour.end" :min="0" :max="23" @on-change="generateCronExpression" />
                  <span>小时</span>
                </div>
                <div v-if="hour.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="hour.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 24" :key="`hour-${i-1}`" :label="i-1">{{ i-1 }}</Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
            </TabPane>
            <TabPane label="日期" name="day">
              <div class="tab-content">
                <RadioGroup v-model="day.type" @on-change="generateCronExpression">
                  <Radio label="every">每天</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                  <Radio label="workday">工作日</Radio>
                  <Radio label="lastday">最后一天</Radio>
                </RadioGroup>
                <div v-if="day.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="day.start" :min="1" :max="31" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="day.end" :min="1" :max="31" @on-change="generateCronExpression" />
                  <span>日</span>
                </div>
                <div v-if="day.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="day.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 31" :key="`day-${i}`" :label="i">{{ i }}</Checkbox>
                  </CheckboxGroup>
                </div>
                <div v-if="day.type === 'workday'" class="input-group">
                  <span>每月</span>
                  <InputNumber v-model="day.workday" :min="1" :max="31" @on-change="generateCronExpression" />
                  <span>号最近的工作日</span>
                </div>
              </div>
            </TabPane>
            <TabPane label="月份" name="month">
              <div class="tab-content">
                <RadioGroup v-model="month.type" @on-change="generateCronExpression">
                  <Radio label="every">每月</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                </RadioGroup>
                <div v-if="month.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="month.start" :min="1" :max="12" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="month.end" :min="1" :max="12" @on-change="generateCronExpression" />
                  <span>月</span>
                </div>
                <div v-if="month.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="month.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 12" :key="`month-${i}`" :label="i">{{ i }}</Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
            </TabPane>
            <TabPane label="星期" name="week">
              <div class="tab-content">
                <RadioGroup v-model="week.type" @on-change="generateCronExpression">
                  <Radio label="every">每周</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                  <Radio label="lastweek">本月最后一个</Radio>
                  <Radio label="nthweek">第N个</Radio>
                </RadioGroup>
                <div v-if="week.type === 'cycle'" class="input-group">
                  <span>从星期</span>
                  <InputNumber v-model="week.start" :min="1" :max="7" @on-change="generateCronExpression" />
                  <span>到星期</span>
                  <InputNumber v-model="week.end" :min="1" :max="7" @on-change="generateCronExpression" />
                </div>
                <div v-if="week.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="week.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="(day, index) in weekDays" :key="`week-${index+1}`" :label="index+1">{{ day }}</Checkbox>
                  </CheckboxGroup>
                </div>
                <div v-if="week.type === 'lastweek'" class="input-group">
                  <span>本月最后一个星期</span>
                  <Select v-model="week.lastweek" style="width: 100px" @on-change="generateCronExpression">
                    <Option v-for="(day, index) in weekDays" :key="`lastweek-${index+1}`" :value="index+1">{{ day }}</Option>
                  </Select>
                </div>
                <div v-if="week.type === 'nthweek'" class="input-group">
                  <span>本月第</span>
                  <InputNumber v-model="week.nth" :min="1" :max="5" @on-change="generateCronExpression" />
                  <span>个星期</span>
                  <Select v-model="week.nthweekday" style="width: 100px" @on-change="generateCronExpression">
                    <Option v-for="(day, index) in weekDays" :key="`nthweek-${index+1}`" :value="index+1">{{ day }}</Option>
                  </Select>
                </div>
              </div>
            </TabPane>
            <TabPane label="年" name="year">
              <div class="tab-content">
                <RadioGroup v-model="year.type" @on-change="generateCronExpression">
                  <Radio label="every">每年</Radio>
                  <Radio label="cycle">周期</Radio>
                  <Radio label="specific">指定</Radio>
                </RadioGroup>
                <div v-if="year.type === 'cycle'" class="input-group">
                  <span>从</span>
                  <InputNumber v-model="year.start" :min="2000" :max="2100" @on-change="generateCronExpression" />
                  <span>到</span>
                  <InputNumber v-model="year.end" :min="2000" :max="2100" @on-change="generateCronExpression" />
                  <span>年</span>
                </div>
                <div v-if="year.type === 'specific'" class="checkbox-group">
                  <CheckboxGroup v-model="year.specificList" @on-change="generateCronExpression">
                    <Checkbox v-for="i in 10" :key="`year-${currentYear + i - 1}`" :label="currentYear + i - 1">{{ currentYear + i - 1 }}</Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
        <div class="cron-result">
          <div class="result-header">
            <span>Cron表达式结果</span>
            <div class="result-actions">
              <Button type="primary" size="small" @click="copyCronExpression">复制</Button>
              <Button type="default" size="small" @click="parseCronExpression">解析</Button>
            </div>
          </div>
          <Input v-model="cronExpression" placeholder="输入或生成Cron表达式" />
          <div class="next-execution-times">
            <div class="next-times-header">最近5次执行时间:</div>
            <ul>
              <li v-for="(time, index) in nextExecutionTimes" :key="index">{{ time }}</li>
            </ul>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { CronGenerator } from '@/utils/cronUtils';
import { Message } from 'view-ui-plus';

// 当前年份
const currentYear = new Date().getFullYear();

// 星期几名称
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

// 当前活动的标签页
const activeTab = ref('second');

// Cron表达式
const cronExpression = ref('* * * * * ? *');

// 下一次执行时间
const nextExecutionTimes = ref([]);

// 秒配置
const second = reactive({
  type: 'every',
  start: 0,
  end: 59,
  specificList: []
});

// 分钟配置
const minute = reactive({
  type: 'every',
  start: 0,
  end: 59,
  specificList: []
});

// 小时配置
const hour = reactive({
  type: 'every',
  start: 0,
  end: 23,
  specificList: []
});

// 日期配置
const day = reactive({
  type: 'every',
  start: 1,
  end: 31,
  specificList: [],
  workday: 1
});

// 月份配置
const month = reactive({
  type: 'every',
  start: 1,
  end: 12,
  specificList: []
});

// 星期配置
const week = reactive({
  type: 'every',
  start: 1,
  end: 7,
  specificList: [],
  lastweek: 1,
  nth: 1,
  nthweekday: 1
});

// 年配置
const year = reactive({
  type: 'every',
  start: currentYear,
  end: currentYear + 5,
  specificList: []
});

// 生成Cron表达式
const generateCronExpression = () => {
  const cronGen = new CronGenerator();

  // 设置各个字段的值
  cronGen.setSecond(second.type, second);
  cronGen.setMinute(minute.type, minute);
  cronGen.setHour(hour.type, hour);
  cronGen.setDay(day.type, day);
  cronGen.setMonth(month.type, month);
  cronGen.setWeek(week.type, week);
  cronGen.setYear(year.type, year);

  // 生成表达式
  cronExpression.value = cronGen.generate();

  // 计算下一次执行时间
  calculateNextExecutionTimes();
};

// 计算下一次执行时间
const calculateNextExecutionTimes = () => {
  try {
    nextExecutionTimes.value = CronGenerator.getNextExecutionTimes(cronExpression.value, 5);
  } catch (error) {
    nextExecutionTimes.value = ['无法计算执行时间，请检查表达式'];
  }
};

// 复制Cron表达式
const copyCronExpression = () => {
  navigator.clipboard.writeText(cronExpression.value)
    .then(() => {
      Message.success('已复制到剪贴板');
    })
    .catch(() => {
      Message.error('复制失败');
    });
};

// 解析Cron表达式
const parseCronExpression = () => {
  try {
    if (!cronExpression.value) {
      Message.warning('请输入Cron表达式');
      return;
    }

    const parsedConfig = CronGenerator.parse(cronExpression.value);

    // 更新各个字段的配置
    Object.assign(second, parsedConfig.second);
    Object.assign(minute, parsedConfig.minute);
    Object.assign(hour, parsedConfig.hour);
    Object.assign(day, parsedConfig.day);
    Object.assign(month, parsedConfig.month);
    Object.assign(week, parsedConfig.week);
    Object.assign(year, parsedConfig.year);

    // 计算下一次执行时间
    calculateNextExecutionTimes();

    Message.success('解析成功');
  } catch (error) {
    Message.error('解析失败: ' + error.message);
  }
};

// 组件挂载时生成初始表达式
onMounted(() => {
  generateCronExpression();
});
</script>

<style scoped>
.generate-cron-container {
  padding: 16px;
}

.card-container {
  width: 100%;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.cron-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tab-content {
  margin-top: 16px;
}

.input-group {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cron-result {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e8eaec;
  border-radius: 4px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
}

.result-actions {
  display: flex;
  gap: 8px;
}

.next-execution-times {
  margin-top: 16px;
}

.next-times-header {
  font-weight: 500;
  margin-bottom: 8px;
}

.next-execution-times ul {
  list-style: none;
  padding-left: 0;
}

.next-execution-times li {
  padding: 4px 0;
  border-bottom: 1px dashed #e8eaec;
}
</style>
